<template>
	<view>
		<u-loading-page class="loading" :loading="loading" loadingText="视频正在加载" bg-color="rgba(0,0,0,0.5)"></u-loading-page>
		<view>
			<image class="course_img" src="@/static/images/index/01.png"></image>
		</view>
		<view style="width: 100%;height: 240px;margin-bottom: 2%;"></view>
		<view id="box">
			<view class="text_weight">{{courseDetails.courseName}}</view>
			<view class="course_info">{{courseDetails.courseIntro}}</view>
			<view id="price_box">
				<view class="course_money">
					<text class="course_nprice">￥{{courseDetails.courseNprice}}/</text>
					<text class="course_price">￥{{courseDetails.coursePrice}}</text>
				</view>
				<view class="tag">{{courseDetails.recommend}}</view>
			</view>
			<view class="course_info">
				课程时长：{{courseDetails.courseTime}}分钟
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				目前已有{{courseDetails.saleNum}}人购买
			</view>
			<view class="bottom_box_padding">
				<view class="left bottom_box">
					<image class="icon_img left" src="@/static/images/index/dianzan.svg"></image>
					<view class="left num_font">点赞：{{courseDetails.likeNum}}</view>
				</view>
				<view class="left bottom_box">
					<image class="icon_img left" src="@/static/images/index/collection.svg"></image>
					<view class="left num_font">收藏：{{courseDetails.collectNum}}</view>
				</view>
				<view class="left bottom_box">
					<image class="icon_img left" src="@/static/images/index/share.svg"></image>
					<view class="left num_font">分享：{{courseDetails.shareNum}}</view>
				</view>
			</view>
			<view class="personal_label" @click="toTeacherDetails">
				<image class="acatar_url left" :src="courseDetails.acatarUrl"></image>
				<view class="freestyle left">
					<view class="text_weight">{{courseDetails.trueName}}</view>
					<view class="course_info">{{courseDetails.freestyle}}</view>
				</view>
			</view>
			<view>
				<u-subsection :list="list" mode="button" activeColor="#1ABC9C" :current="curNow" @change="sectionChange"></u-subsection>
				<u-collapse 
					@close="closeFoldPanel"
					@open="openFoldPanel"
					:value="['0']"
					v-if="hidden">
					<u-collapse-item
					  :title="'课程分类：'+courseDetails.title"
					  name="0"
					>
						<view class="course_menu" v-for="(item, index) in courseMenuList">
							<view class="menu_css" style="position: relative;" :class="[courseId == item.courseId?'font_color':'']" @click="toOthers(item.courseId,item.userId)">
								<image class="left icon_img" style="margin-left: 3%;" :src="courseId == item.courseId?iconUrl_select:iconUrl"></image>
								<view class="left num_font_two">{{item.courseName}}</view>
								<view class="relative">￥{{item.courseNprice}}</view>
							</view>
						</view>
					</u-collapse-item>
					<view>
						<u-action-sheet @select="clickSharePopup" :actions="shareList" cancelText="取消" :closeOnClickOverlay="true" @close="closeSharePopup" :closeOnClickAction="true" :show="show"></u-action-sheet>
					</view>
				</u-collapse>
				<view v-if="!hidden">
					<view class="comms">
						<view class="left">留言({{commNums}})</view>
						<view class="left comms_tag" style="margin-left: 10px;">精品留言</view>
						<view @click="openPopup" class="right" style="color: #1ABC9C;">写留言</view>
						<uni-popup ref="popup" type="dialog">
							<uni-popup-dialog mode="input" title="留言" placeholder="留言对所有人可见" :duration="2000" :before-close="true" @close="closePopup" @confirm="confirm"></uni-popup-dialog>
						</uni-popup>
					</view>
					<view v-if="commNums!=0" class="comms_bottom" v-for="(item, index) in courseCommentsList">
						<image class="left comms_imgs" :src="item.avatarUrl"></image>
						<view class="left" style="padding-left: 10px;">
							<view class="text_weight">{{item.nickname}}</view>
							<view class="course_info">{{item.commentDate}}</view>
							<view style="color: #727272;">{{item.content}}</view>
						</view>
						<view class="right">
							<text class="left" style="padding-right: 3px;">{{item.fabulous}}</text>
							<image @click="clickFabulous(index,item.id)" class="icon_img left comm_imgs" :src="praisedComms.indexOf(item.id) != -1 ? dizanUrl_select: dizanUrl"></image>
						</view>
					</view>
					<u-divider text="暂无更多留言"></u-divider>
				</view>
				<view style="width: 100%;height: 70px;"></view>
			</view>
		</view>
		<view class="bottom_menu">
			<view class="bottom_menu_icon">
				<image @click="clickPraise" class="icon_img_menu" :src="praiseShow?praiseCourseSelect:praiseCourseWhite"></image>
			</view>
			<view @click="clickCollection" class="bottom_menu_icon">
				<image class="icon_img_menu" :src="collectionShow?collectionCourseSelect:collectionCourseWhite"></image>
			</view>
			<view @click="show = true" class="bottom_menu_icon">
				<image class="icon_img_menu" src="@/static/images/index/share_white.svg"></image>
			</view>
			<view @click="clickOrder" class="bottom_menu_order">
				下订单：￥{{courseDetails.courseNprice}}
			</view>
		</view>
	</view>
</template>

<script>
	//查看课程详情
	import {getCourseDetails} from '@/static/http/getData.js'
	//查看课程目录
	import {getCourseMenu} from '@/static/http/getData.js'
	//获取课程评论
	import { getCourseComments } from "@/static/http/getData.js"
	//获取课程评论总数
	import { getCourseCommentsNums } from "@/static/http/getData.js"
	//查找有哪些评论被点赞
	import { getPraisedComms } from "@/static/http/getData.js"
	//点赞实现
	import { getPraisedCommsLog } from "@/static/http/getData.js"
	//添加课程评论（写留言）
	import { addCourseComment } from "@/static/http/getData.js"
	//查看当前用户对当前课程是否有点赞记录
	import { getPraiseCourse } from "@/static/http/getData.js"
	//查看当前用户对当前课程是否有收藏记录
	import { getCollectionCourse } from "@/static/http/getData.js"
	//点赞课程
	import { addPraiseCourse } from "@/static/http/getData.js"
	//取消课程点赞
	import { delPraiseCourse } from "@/static/http/getData.js"
	//收藏课程
	import { addCollectionCourse } from "@/static/http/getData.js"
	//取消课程收藏
	import { delCollectionCourse } from "@/static/http/getData.js"
	
	export default {
		data() {
			return {
				//课程详情信息
				courseDetails: [],
				//课程目录
				courseMenuList: [],
				//课程评论
				courseCommentsList: [],
				list: ['课程目录', '评论区'],
				curNow: 0,
				hidden: true,
				iconUrl: '/static/images/index/play.svg',
				iconUrl_select: '/static/images/index/play_select.svg',
				dizanUrl: '/static/images/index/course/comms_dianzan.svg',
				dizanUrl_select: '/static/images/index/course/comms_dianzan_select.svg',
				praiseCourseWhite: '/static/images/index/dianzan_white.svg',
				praiseCourseSelect: '/static/images/index/dianzan.svg',
				collectionCourseWhite: '/static/images/index/collection_white.svg',
				collectionCourseSelect: '/static/images/index/collection.svg',
				//课程id
				courseId: '',
				type: 2,//课程
				commNums: 0,//课程评论数
				//评论索引
				beforeUser: '',
				//被点赞的评论id
				praisedComms: [],
				scrollTop: '',
				//时候显示加载
				loading: true,
				//是否有点赞记录
				praiseShow: false,
				//是否有收藏记录
				collectionShow: false,
				title: '分享到',
				shareList: [
					{
						name:'分享到微信好友',
						id: 0
					},
					{
						name: '分享到微信朋友圈',
						id: 1
					}
				],
				show: false
			}
		},
		onLoad(e) {
			//当前用户
			this.beforeUser = JSON.parse(uni.getStorageSync('beforeUser'));
			this.courseId = e.courseId;
			this.getCourseDetails({courseId: e.courseId});
			this.getCourseMenu({userId: e.userId});
			this.getCourseCommentsNums(e.courseId,this.type);
			this.getCourseComments(e.courseId,this.type);
			this.getPraisedComms();
			this.getPraiseCourse({
				userId: this.beforeUser.userId,//点赞用户
				type: 2,//课程类型
				bePraisedId: e.courseId,//被点赞课程id
				userType: 2,//用户类型：2前端
			} );
			this.getCollectionCourse({
				userId: this.beforeUser.userId,
				collectionType: 2,
				productId: e.courseId
			});
			this.$nextTick(function(){
				this.loading = false;
			})
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			this.scrollTop = e.scrollTop;
		},
		methods: {
			sectionChange(index){
				this.curNow = index;
				//切换课程目录与评论区
				this.hidden = !this.hidden;
			},
			closeFoldPanel(e){
				
			},
			openFoldPanel(e){
				
			},
			//查看课程详情
			getCourseDetails(courseId){
				getCourseDetails(courseId).then(res => {
					if(res.data.data.recommend == 1){
						res.data.data.recommend = '推荐';
					}else if(res.data.data.recommend == 2){
						res.data.data.recommend = '新品';
					}else if(res.data.data.recommend == 3){
						res.data.data.recommend = '推荐';
					}else if(res.data.data.recommend == 4){
						res.data.data.recommend = '其他';
					}
					res.data.data.acatarUrl = 'http://123.57.150.236:80/group1/M00/00/02/rBxIrGJBSqKADd8lAAFNrcBV42M286.jpg';
					this.courseDetails = res.data.data;
					uni.setStorageSync('courseDetails',JSON.stringify(res.data.data));
				})
			},
			//查看课程目录
			getCourseMenu(userId){
				getCourseMenu(userId).then(res => {
					this.hidden = false;
					this.courseMenuList = res.data.data;
					//dom数据渲染后执行
					this.$nextTick(function(){
						this.hidden = true;
					})
					uni.setStorageSync('courseMenuList',JSON.stringify(res.data.data));
				})
			},
			//跳转课程目录的其他课程 
			toOthers(courseId,userId){
				uni.navigateTo({
					url: '/pages/index/course_details?courseId='+ courseId + '&userId=' + userId+'',
				})
			},
			//获取课程评论
			getCourseComments(courseId,type){
				getCourseComments({courseId:courseId,type:type}).then(res => {
					//this.commNums = res.data.data[0].commNums;
					var courseCommentsList = res.data.data;
					//转换日期格式
					for (var i = 0; i < courseCommentsList.length; i++) {
						if(courseCommentsList[i].commentDate != null){
							var commentDate = courseCommentsList[i].commentDate;
							commentDate = commentDate.replace("-","年");
							courseCommentsList[i].commentDate = commentDate;
							commentDate = commentDate.replace("-","月");
							courseCommentsList[i].commentDate = commentDate;
							courseCommentsList[i].commentDate = commentDate.slice(0,10) + "日" + commentDate.slice(10);
						}
					}
					this.courseCommentsList = courseCommentsList;
				})
			},
			//获取课程评论总数
			getCourseCommentsNums(courseId,type){
				getCourseCommentsNums({courseId:courseId,type:type}).then(res => {
					this.commNums = res.data.data;
				})
			},
			//查找有哪些评论被点赞
			getPraisedComms(){
				getPraisedComms().then(res => {
					this.praisedComms = res.data.data;
				})
			},
			//点赞
			clickFabulous(index,id){
				var data = {
					commentId: id,//评论id
					userId: this.beforeUser.userId,//当前用户
					userType: 2,//代表前端
					productType: 2,//代表课程
					productId: this.courseId,//课程id
				} 
				this.getPraisedCommsLog(data,index);
			},
			//点赞功能实现
			getPraisedCommsLog(data,index){
				getPraisedCommsLog(data).then(res => {
					if(res.data.data == 1){//点赞
						this.courseCommentsList[index].fabulous++;
					}else if(res.data.data == 2){//取消点赞
						this.courseCommentsList[index].fabulous--;
					}
					//重新渲染数据
					this.getPraisedComms();
				})
			},
			//教师详情
			toTeacherDetails(){
				uni.navigateTo({
					url: '/pages/index/teacher_details',
				}) 
			},
			//添加课程评论（写留言）
			addCourseComment(data){
				addCourseComment(data).then(res => {
					if(res.data.data){
						uni.$u.toast('评论成功');
						//重新渲染评论
						this.getCourseComments(this.courseId,this.type);
						//重新渲染评论数量
						this.getCourseCommentsNums(this.courseId,this.type);
					}else{
						uni.$u.toast('评论失败');
					}
				})
			},
			openPopup() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			closePopup() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
				var data = {
					userId: this.beforeUser.userId,//当前用户
					commodityId: this.courseId,//课程id
					content: value,//评论内容
					createId: this.beforeUser.userId//当前用户
				}
				//添加评论
				this.addCourseComment(data);
			},
			//查看当前用户对当前课程是否有点赞记录
			getPraiseCourse(data){
				getPraiseCourse(data).then(res => {
					if(res.data.data){
						this.praiseShow = true;
					}else{
						this.praiseShow = false;
					}
				})
			},
			//查看当前用户对当前课程是否有收藏记录
			getCollectionCourse(data){
				getCollectionCourse(data).then(res => {
					if(res.data.data){
						this.collectionShow = true;
					}else{
						this.collectionShow = false;
					}
				})
			},
			//点赞
			clickPraise(){
				console.log("点赞");
				var data = {
					userId: this.beforeUser.userId,//当前用户
					type: 2,//类型：视频 
					bePraisedId: this.courseId,//被点赞课程id.
					userType: 2,//前台用户
				}
				if(this.praiseShow){
					//取消点赞
					delPraiseCourse(data).then(res => {
						if(res.data.data){ 
							this.praiseShow = false;
							this.courseDetails.likeNum--;
						}
					})
				}else{
					//点赞
					addPraiseCourse(data).then(res => {
						console.log(res.data.data);
						if(res.data.data){
							this.praiseShow = true;
							this.courseDetails.likeNum++;
						}
					})
				}
			},
			//收藏
			clickCollection(){
				var data = {
					userId: this.beforeUser.userId,//当前用户
					collectionType: 2,//类型：视频
					productId: this.courseId,//被点赞课程id.
					collectionPrice: this.courseDetails.coursePrice,//收藏价格
					productCurrentprice: this.courseDetails.courseNprice,//课程现价
					effective: 2,//有效
					userType: 2,//前台用户
				}
				if(this.collectionShow){
					//取消收藏
					delCollectionCourse(data).then(res => {
						if(res.data.data){
							this.collectionShow = false;
							this.courseDetails.collectNum--;
						}
					})
				}else{
					//收藏
					addCollectionCourse(data).then(res => {
						if(res.data.data){
							this.collectionShow = true;
							this.courseDetails.collectNum++;
						}
					})
				}
			},
			//分享到微信好友
			clickShareFriend(){
				console.log('好友');
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: this.courseDetails.courseName,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//分享到微信朋友圈
			clickShareFriendCircle(){
				console.log('朋友圈');
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//关闭分享弹窗
			closeSharePopup(){
				this.show = false;
			},
			//点击分享
			clickSharePopup(elem){
				if(elem.id == 0) this.clickShareFriend();//分享到微信好友
				else this.clickShareFriendCircle();//分享到微信朋友圈
			},
			//下订单
			clickOrder(){
				uni.$u.toast('下订单');
			},
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.course_img{
		width: 100%;
		margin: 0 auto;
		margin-bottom: 2%;
		//display: block;
		position: fixed;
		z-index: 900;
	}
	#box{
		width: 93%;
		padding: 0 3%;
		margin: 0 auto;
	}
	.text_weight{
		font-weight: bold;
		font-size: 16px;
		margin-bottom: 2%;
	}
	.course_info{
		font-size: 14px;
		color: #959595;
		//设置文字两端对齐
		text-align: justify;
		margin-bottom: 2%;
	}
	#price_box{
		overflow: hidden;
		margin: 2% 0;
	}
	.course_money{
		//border: 1px solid red;
		float: left;
		padding-right: 5%;
	}
	.tag{
		width: 60px;
		font-size: 14px;
		color: #1ABC9C;
		text-align: center;
		border-radius: 20px;
		float: left;
		border: 1px solid #1ABC9C;
	}
	.course_nprice{
		color: #FB6906;
		font-size: 18px;
		font-weight: bold;
	}
	.course_price{
		color: #959595;
		text-decoration: line-through;
	}
	.icon_img{
		width: 20px;
		height: 20px;
	}
	image{
		display: block;
		margin: auto 0;
	}
	.bottom_box_padding{
		color: #959595;
		overflow: hidden;
	}
	.bottom_box{
		margin-right: 20px;
	}
	.left{
		float: left;
	}
	.right{
		float: right;
		padding-right: 20px;
	}
	.num_font{
		padding-left: 10px;
	}
	.num_font_two{
		//margin-right: 44%;
		margin-left: 2%;
	}
	.acatar_url{
		width: 75px;
		height: 75px;
		border-radius: 50%;
	}
	.personal_label{
		margin-top: 7%;
		padding: 4% 0;
		border-top: 1px solid rgba($color: #959595, $alpha: 0.5);
		overflow: hidden;
	}
	.freestyle{
		width: 70%;
		height: 70px;
		padding-left: 15px;
		padding-top: 5px;
	}
	.course_menu:first-child{
		border-top: 1px solid rgba($color: #959595, $alpha: 0.2);
	}
	.menu_css{
		height: 50px;
		//line-height: 50px;
		//overflow: hidden;
		border-left: 1px solid rgba($color: #959595, $alpha: 0.2);
		border-right: 1px solid rgba($color: #959595, $alpha: 0.2);
		border-bottom: 1px solid rgba($color: #959595, $alpha: 0.2);
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.font_color{
		color: #1ABC9C;
	}
	.comms{
		padding-left: 10px;
		padding-top: 2%;
		padding-bottom: 2%;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	.comms_tag{
		width: 80px;
		font-size: 14px;
		text-align: center;
		color: #959595;
		border: 1px solid #959595;
		border-radius: 20px;
	}
	.comms_imgs{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-left: 2%;
	}
	.comms_bottom{
		padding: 2% 0;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	.relative{
		position: absolute;
		right: 10px;
	}
	.loading{
		position: fixed;
		z-index: 1000;
	}
	.bottom_menu{
		width: 100%;
		height: 70px;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.bottom_menu_icon{
		padding: 2% 2%;
		border-radius: 50%;
		margin-left: 6%;
		box-shadow: 0 0 3px 3px #F0F0F4;
	}
	.icon_img_menu{
		width: 30px;
		height: 30px;
	}
	.bottom_menu_order{
		color: #ffffff;
		width: 30%;
		padding: 3% 3%; 
		border-radius: 30px;
		text-align: center;
		margin-left: 5%;
		background-color: #FF6764;
	}
</style>
